<template>
  <div class="all">
    <ul>
      <li>支付宝支付</li>
    </ul>
    <div class="R-body">
      <table width="100%">
        <tbody>
          <tr>
            <td class="R-right">账号</td>
            <td><input type="text" v-model="list[0].date.account"></td>
          </tr>
          <tr>
            <td class="R-right">密钥</td>
            <td><input type="text" v-model="list[0].date.secret"></td>
          </tr>
        </tbody>
      </table>

    <ul>
      <li>微信支付</li>
    </ul>
    <div class="R-body">
      <table width="100%">
        <tbody>
         <tr>
           <!-- v-model="list.WeChat.account"v-model="list.WeChat.secret" -->
           <td class="R-right">账号</td>
           <td><input type="text" v-model="list[1].date.account"></td>
         </tr>
         <tr>
           <td class="R-right">密钥</td>
           <td><input type="text" v-model="list[1].date.secret"></td>
         </tr>

        </tbody>
      </table>
    </div>
    <button @click="subim()">提交</button>
    </div>
  </div>
</template>

<script>
   export default {
      data() {
        return {
              list:[
                {
                  chargeType:'Alipay',
                  date:{}
                },
                {
                 chargeType:'WeChat',
                 date:{}
                }
              ]
              }

        },

      methods: {
      subim(){
  var _this=this
       this.$alert(
       '<table><tbody><tr><td>微信账号</td><td>'+this.list[1].date.account+'</td></tr>'+'<tr><td>微信密钥</td><td>'+this.list[1].date.secret+'</td></tr>'+
         '<tr><td>支付宝账号</td><td>'+this.list[0].date.account+'</td></tr><tr><td>支付宝密钥</td><td>'+this.list[0].date.secret+'</td></tr></tbody></table>'
      , 'HTML 片段', {
            dangerouslyUseHTMLString: true
          }).then(()=>{
            _this.list.forEach((val,keys)=>{
              _this.$axios({
                method: "POST",
                url: '/api/admin/charge/config',
                headers: {'Content-Type': 'application/json'},
                data: {   adminName:_this.$cookies.get('adminName'),
                          token:_this.$cookies.get('token'),
                          chargeType:val.chargeType,
                          account:val.date.account,
                          secret:val.date.secret
                      },
              }).then(res=>{
                       this.$message({
                            type: 'success',
                            message: '删除成功!'
                          });
              })
            })



          })
}
      }
    }
</script>

<style scoped>
ul{
      display: flex;
      height: 33px;
      position: relative;
      bottom: -1px;
      z-index: 9;
}
li{
      height: 32px;
      padding: 0 8px;
      line-height: 32px;
      color: #333333;
      border-left: 1px solid #dce3ed;
      border-top: 1px solid #dce3ed;
      border-right: 1px solid #dce3ed;
      margin-left: 15px;
      background-color: #FFFFFF;
}
.R-body{
      border: 1px solid #dce3ed;
      width: 97%;
      padding: 10px;
      overflow: hidden;
}
td{
   border-bottom: 1px solid #dce3ed;

   font-size: 16px;
}
.R-right{
  text-align: right;
  padding-right: 15px;
  color: #777;
}
button{
  margin:10px 10px;
}
input{
  float: left;
}
</style>
